<template>
  <!-- 图标要对应更换 -->
  <div class="iconUnit" :class="{canClick: type=='type2' && title === '提交量'}" @click="tabClick">
    <img :src="iconTypes[type]" alt="">
    <div>
      <h4>{{title}}</h4>
      <p class="unit-data"> {{unitData}}</p>
      <p class="unit-desc">{{desc}}</p>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    data () {
      return {
        iconTypes: {
          'type1': require('../assets/icon-1.png'),
          'type2': require('../assets/icon-2.png'),
          'type3': require('../assets/icon-2.png')
        }
      }
    },
    props: ['type', 'title', 'desc', 'unitData'],
    mounted () {

    },
    methods: {
      tabClick () {
        if (this.type === 'type2' && this.title === '提交量') {
          this.$router.push({name: this.$route.matched[1].name + 'Third', params: {id: this.$route.params.id}})
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" rel="stylesheet/scss">
  .iconUnit {
    display: flex;
    width: 160px;
    margin: 0 auto;
    align-items: center;
    img {
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
    h4 {
      margin: 0;
      font-size: 13px;
    }
    .unit-data {
      font-size: 28px;
      margin: 0;
    }
    .unit-desc {
      font-size: 13px;
      margin: 0;
      color: #999999;
    }
    &.canClick{
      cursor: pointer;
    }
  }
</style>
